<template>
    <div class="create-answer-team ">
        <Modal class="diy-modal" v-model="modalShow" scrollable title="新增答案" @on-ok="submit" width="960" @on-cancel="clear">
            <div class="d-flex wrap around">
                <Card class="w-300 mb-1" v-for="(val,index) in questionList" :key="index">
                    <h4 slot="title" class="substr-line-more" style="height:40px;line-height:20px">{{val.title}}</h4>
                    <RadioGroup v-model="answerList[index]" v-if="!val.is_multi" class="mt-1">
                        <Radio  v-for="v in val.option" :key="v.index" :label="v.index">{{v.index}}</Radio>
                    </RadioGroup>
                    <CheckboxGroup v-else v-model="answerList[index]" class="mt-1">
                        <Checkbox v-for="v in val.option" :key="v.index" :label="v.index">{{v.index}}</Checkbox>
                    </CheckboxGroup>
                </Card>
            </div>
            <upload-button @set_files="set_files" v-if="openAnswerDialog"/>
        </Modal>
    </div>
</template>
<script>
    import {deep_clone} from "@/common/tool"
    import uploadButton from "@/components/uploadButton"
    export default {
        props:['openAnswerDialog','questionList'],
        data(){
            return{
                modalShow:false,
                answerList:[],
                files:''
            }
        },
        methods:{
            set_files(listStr){
                this.files=listStr
            },
            clear(){
                this.answerList=[]
                this.files=''
                this.$emit('close')
            },
            submit(){
                const answers=deep_clone(this.answerList.map(el=>Array.isArray(el)?el.sort((a,b)=>a.charCodeAt(0)-b.charCodeAt(0)).join(','):el))
                this.$emit('add',{answers,files:this.files})
                this.clear()
            }
        },
        components:{
            uploadButton
        },
        watch:{
            openAnswerDialog(){
                if(this.openAnswerDialog)
                    this.answerList=this.questionList.map(el=>(el.is_multi?[]:''))
                this.modalShow=this.openAnswerDialog
            },
        },

    }
</script>